<!-- 地铁线路与客运量对比统计 -->
<template>
    <div class="h-100 w-100">
      <div style="height: 60px;">
        <tablleBar
          @submit-swich="swichTable"
          :list="['湖泊', '港渠']"
        ></tablleBar>
      </div>
      <div class="w-100 h-10 d-flex justify-content-end" style="position: absolute;right: 0; top: 70px;">
        <FakeLegend
          style="margin: auto 30px auto 0px"
          :color="['rgba(3, 230, 254, 1)']"
          :text="['治理前']"
        >
        </FakeLegend>
        <FakeLegend :color="['rgba(184, 235, 143, 1)']" :text="['治理后']">
        </FakeLegend>
      </div>
      <div class="szy2-box" style="height: calc(100% - 80px);width: 100%;overflow-x: auto">
        <div
          id="szy2"
          style="width: 100%;height: 100%; position: relative"
        ></div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import tablleBar from "@/components/project/tablleBar.vue";
  import { useOptions } from "@/hook/useOptions";
  import * as echarts from "echarts";
  import { chartOptions } from "@/hook/chartOptions";
  import {useFunc} from "@/hook/useFunc";
  
  const option: any = chartOptions().twoBarOption(echarts, ['治理前', '治理后']);
  
  let myChart: any;
  const jsonData: any = inject("jsonData");
  const activeItem = ref(0);

  const props = defineProps({
    unit: {
        default: 0
    }
  })
  
  const current = computed(() => {
    let data = [[], []];
    try {
      data = jsonData.value.yxjk.yzwrpg[props.unit][activeItem.value];
    } catch (error) {}
  
    return data;
  });
  
  watch(
    () => current.value,
    (val) => {
      if (val) {
        const obg:any = useOptions().waterUnit.find(item => item.value == props.unit)
        const unit = obg.label
        myChart.setOption({
          xAxis: [
            {
              data: useOptions().paishuiList.map((item: any) => item.label),
              axisLabel: {
                interval: "auto", // 自动计算间隔
                minInterval: 1, // 设置最小间隔为1
                fontSize: 20,
                color: "#667A8E",
              },
            },
          ],
          dataZoom: [
            {
                type: 'slider',
                height: 0,
                moveHandleSize: 10,
                xAxisIndex: 0,
                zoomLock: true,
                start: 0,
                end: 40,
                bottom: "20%",
            }
        ],
          yAxis: [
            {
              name: unit,
            }, 
          ],
          grid: {
            bottom: "15%",
          },
          series: [{ data: val[0] }, { data: val[1] }],
        });
      }
    }
  );
  
  const swichTable = (item: any) => {
    activeItem.value = item;
  };
  
  onMounted(() => {
    myChart = echarts.init(document.getElementById("szy2") as HTMLElement);
    myChart.setOption(option);
 
    const scrollContainer = document.querySelector(".szy2-box");
    // useFunc().autoScroll(scrollContainer, "horizontal");
  });
  </script>
  
  <style></style>
  